import { FC, useContext, useState } from 'react';

import { Tabs, Table } from 'antd';

import { courseMock } from './mock';
import { DesignRedux } from '../../DesignRedux';
import styles from './index.less';

const { TabPane } = Tabs;

// todo 写一套样式
const CourseFC: FC<any> = (props: any) => {
  const { dispatch } = useContext(DesignRedux);
  const { property } = props;

  const columns = [
    {
      title: '课程名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '课 时',
      dataIndex: 'classHour',
      key: 'classHour',
    },
    {
      title: '老师',
      dataIndex: 'teacher',
      key: 'teacher',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '试听',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '详情',
      dataIndex: 'action',
      key: 'action',
    },
  ];

  function callback(key) {
    console.log(key);
  }

  function onclickCourse() {
    dispatch({ rightEleProperty: property });
  }

  const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },

    getCheckboxProps: (record: any) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

  function rendTab(dataSource: any, index: number) {
    return (
      <Table
        key={index.toString()}
        rowKey={(record) => record.id}
        style={{ marginTop: 20 }}
        dataSource={dataSource}
        columns={columns}
        pagination={false}
        rowSelection={{
          type: 'checkbox',
          ...rowSelection,
        }}
      />
    );
  }

  // 价格计算
  return (
    <div>
      <div className={styles.ztCourse}>
        <Tabs defaultActiveKey="1" onChange={callback}>
          {courseMock &&
            courseMock.map((item: object, index: number) => {
              return (
                <TabPane
                  key={item.id}
                  tab={item.title}
                  tabBarStyle={{
                    background: '#fffcf4',
                  }}
                >
                  {/* 联报方案*/}
                  <div className={styles.saleContent}>
                    <div className={styles.saleContentLeft}>联报方案</div>
                    <div className={styles.saleContentRight}>
                      <div className={styles.salePart}>两科联报减2000</div>
                      <div className={styles.salePart}>三科联报减2500</div>
                    </div>
                  </div>

                  <div className={styles.featureContent}>
                    <div className={styles.featureContentLeft}>班型特色</div>
                    <div className={styles.featureContentRight}>
                      {item.feature}
                    </div>
                  </div>

                  {rendTab(item.courseList, index)}
                </TabPane>
              );
            })}
        </Tabs>
      </div>
    </div>
  );
};

export default CourseFC;
